<template>
	<view class="selete_box" :id="id">
		<view class="selete_input">
			<input type="text" placeholder="请选择" @focus='focus' v-if="isInput" v-model="selectValue.value"
				@input="input">
			<block v-else>
				<text @click="open" v-if="selectValue.value">{{selectValue.value}}</text>
				<text @click="open" v-else style="color: #999999;">请选择</text>
			</block>
			<view @click="clearAll" v-if="selectValue.value">
				<icon type="clear" size="16" />
			</view>
			<view class="uni-select--mask" v-if="show" @click="show=false"></view>
			<view class="selete_list" :style="{'width':listWidth,'top':!positionTop?'60rpx':`-${scrollHeight+40}px`}"
				v-if="show">
				<view class="uni-popper__arrow" v-if="!positionTop"></view>
				<scroll-view :scroll-y="true" :style="{'height':scrollHeight+'px'}">
					<view v-for="(item,index) in selectItem" :key='index' hover-class='hoverClass'
						@click="selected(item)">
						{{item.value}}
					</view>
				</scroll-view>
				<view class="uni-popper__arrow1" v-if="positionTop" style="transform: rotate(180deg);"></view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		name: "gtSelect",
		props: {
			//下拉框髋度
			listWidth: {
				type: String,
				default () {
					return '500rpx'
				}
			},
			//下拉框列表
			selectItem: {
				type: Array,
				default () {
					return [{
						value: '暂无数据',
						id: ''
					}]
				}
			},
			//是否可输入 
			isInput: {
				type: Boolean,
				default () {
					return false
				}
			},
			//是否禁用
			disabled: {
				type: Boolean,
				default () {
					return false
				}
			},
		},
		
		computed: {
			scrollHeight() {
				//给每个组件一个唯一id
				this.id = 'select' + Math.round(Math.random() * 10000000)
				let height = 300
				if (this.selectItem.length < 16) {
					height = this.selectItem.length * 40
				}
				this.getPosition(height)
				console.log(height);
				return height
			},

		},
		data() {
			return {
				id: 'selete_id',
				show: false,
				selectValue: {
					value: '',
					id: ''
				},
				positionTop: false,
			};
		},
		methods: {
			getPosition(listHeight) {
				setTimeout(() => {
					uni.getSystemInfo({
						success: (e) => {
							let windowHeight = e.windowHeight
							// #ifndef MP-ALIPAY
							console.log(this.id);
							const query = uni.createSelectorQuery().in(this);
							query.select(`#${this.id}`).boundingClientRect(data => {
								console.log("得到布局位置信息", data);
								let toBottom = windowHeight - data.bottom
								console.log("节点底部距离为", toBottom);
								if (toBottom < listHeight) {
									this.positionTop = true
								} else {
									this.positionTop = false
								}
							}).exec();
							// #endif
							// #ifdef MP-ALIPAY

							dd.createSelectorQuery()
								.select(`#${this.id}`).boundingClientRect()
								.selectViewport().exec((ret) => {
									console.log(ret);
									let toBottom = windowHeight - ret[0].bottom
									if (toBottom < listHeight) {
										this.positionTop = true
									} else {
										this.positionTop = false
									}
								});
							// #endif
						}
					});

				}, 500)
			},
			clearAll() {
				this.selectValue = {
					value: '',
					id: ''
				}
				this.$emit("selectCange", '')
			},
			selected(val) {
				if (val.value != '暂无数据') {
					this.selectValue = val
					this.$emit("selectCange", val)
				}
				this.show = false
			},
			input(e) {
				this.selectValue = {
					value: e.detail.value,
					id: ''
				}
			},
			open() {
				if (this.disabled) {
					return
				}
				this.show = !this.show
			},
			focus() {
				if (this.disabled) {
					return
				}
				this.show = true
			},


		}
	}
</script>

<style lang="scss" scoped>
	.selete_box {
		padding: 10rpx 25rpx;
		box-sizing: border-box;
		flex: 1;
		font-size: 28rpx !important;
		background-color: #ffffff;

		.selete_input {
			position: relative;
			height: 40rpx;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			width: 100%;

			&>text {
				display: inline-block;
				min-width: 300rpx;
				flex: 1
			}

			;

			&>input {
				flex: 1;
				font-size: 28rpx;
				padding-left: 0 !important;
			}

			.selete_list {
				flex: 1;
				box-shadow: 0px 0px 8px 5px #f5f5f5;
				min-height: 50rpx;
				position: absolute;
				top: 60rpx;
				left: 0;
				display: flex;
				flex-direction: column;
				border: 1rpx solid #f5f5f5;
				border-radius: 10rpx;
				background-color: #ffffff;
				padding: 30rpx 0;
				z-index: 10000;

				view {
					padding: 15rpx 25rpx;
					box-sizing: border-box;
				}
			}

		}
	}

	.hoverClass {
		background-color: #efefef;
	}

	.uni-select--mask {
		position: fixed;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		z-index: 10;
	}

	/* picker 弹出层通用的指示小三角 */
	.uni-popper__arrow,
	.uni-popper__arrow::after {
		position: absolute;
		display: block;
		width: 0;
		height: 0;
		border-color: transparent;
		border-style: solid;
		border-width: 6px;
	}

	.uni-popper__arrow {
		filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
		top: -6px;
		left: 10%;
		margin-right: 3px;
		border-top-width: 0;
	}

	.uni-popper__arrow::after {
		content: " ";
		top: 1px;
		margin-left: -6px;
		border-top-width: 0;
		border-bottom-color: #fff;
	}

	.uni-popper__arrow1,
	.uni-popper__arrow1::after {
		position: absolute;
		display: block;
		width: 0;
		height: 0;
		border-color: transparent;
		border-style: solid;
		border-width: 6px;
	}

	.uni-popper__arrow1 {
		filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
		bottom: -8px;
		left: 10%;
		margin-right: 3px;
		border-top-width: 0;
	}

	.uni-popper__arrow1::after {
		content: " ";
		top: 1px;
		margin-left: -6px;
		border-top-width: 0;
		border-bottom-color: #fff;
	}
</style>